<template>
	<view class="uni-container" style="height: 100vh; overflow: hidden;">
		<view class="uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="left">
					<image src="../../static/babySleep.png" class="icon-style"></image>
					<text class="uni-list-cell-db">自动点击睡着了</text>
				</view>
				<switch checked style="transform:scale(0.9)" color= "#ffd700"/>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="left">
					<image src="../../static/babyweakup.png" class="icon-style"></image>
					<view class="uni-list-cell-db">自动点击醒来了 </view>
				</view>
				<switch style="transform:scale(0.9)" color= "#ffd700" />
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				isSwitched: true, // 初始状态为关闭
			}
		},
		onLoad() {

		},
		methods: {
			handleSwitchChange() {
				console.log('Switch state changed to:', this.isSwitched);
			},
		},
	}
</script>

<style lang="scss">
	.uni-container {
		padding: 15px;
		background-color: #f1f1f1;

		.uni-list {
			background-color: white;

			.uni-list-cell-pd {
				padding: 11px 15px;
			}

			.uni-list-cell {
				position: relative;
				padding: 20px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.left {
					position: relative;
					display: flex;
					flex-direction: row;
					align-items: center;

				}

				.icon-style {
					width: 30px;
					height: 30px;
				}

			}

			.uni-list-cell:before {
				content: '';
				/* 伪元素需要内容，即使它是空的 */
				position: absolute;
				/* 相对于 .uni-list-cell 定位 */
				bottom: 0px;
				/* 紧贴元素底部 */
				left: 65px;
				/* 左边留出10个像素的空白 */
				right: 0px;
				/* 右边延伸到容器的边缘（或父元素的边缘，取决于定位上下文） */
				height: 1px;
				/* 边框线的高度 */
				background-color: #e1e1e1;
				/* 边框线的颜色 */
			}

			.uni-list-cell-db {
				margin-left: 15px;
				flex: 1;
			}
		}
	}
</style>